import React, { Component } from 'react';
import { StyleSheet, View,ListView,Text,
    Dimensions,Image,TextInput,ScrollView  } from 'react-native';
import { connect } from 'react-redux';
import * as ReduxAction from './redux/action';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/FontAwesome';
import { List, ListItem,Avatar} from 'react-native-elements'

import PhotoActionSheet from '../component/PhotoActionSheet';
import TaskItem from '../component/TaskItem';
import AppStyle from '../styles/index';
import {txt,view} from '../comm/Size';
import {Tool} from "../comm/util";
import Action from '../comm/action';
import TopBar from '../component/TopBar'

const { width, height } = Dimensions.get("window");

export class TaskList extends Component {

    constructor(props) {
        super();
        this.state = {
            dataSource: []
        };
    }

    readTaskDetail=(item)=>{
        this.props.navigation.navigate('DetailPage',{item})
    }

    render() {
        var data=this.props.taskList;
        if(this.props.type=="end"){
            data=data.filter(item=>{
                return item.recordId
            })
        }else if(this.props.type=="init"){
            data=data.filter(item=>{
                return !item.recordId
            })
        }

        return (
            <ScrollView>
                <List containerStyle={{marginTop:0,backgroundColor:"#CCCCCC"}}>
                    {data.map(item=> {
                        return <TaskItem
                            key={item.uuid}
                            onPress={()=>this.readTaskDetail(item)}
                            {...item}
                        />

                    })}
                </List>
            </ScrollView>
        )
    }
}


class TaskListPage extends Component {

    static navigationOptions = {
        header:null
    }

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.loadTask();
    }

    back=()=>{
        this.props.navigation.navigate('HomePage')
    }

    render() {

        return (
            <View style={styles.container}>
                <TopBar
                    leftIcon={<Icon size={22} onPress={this.back} color="#FFF" name="chevron-left"></Icon>}
                    title="我的清单"
                />
                <ScrollableTabView
                    initialPage={0}
                    tabBarUnderlineStyle={{display:'none'}}
                    tabBarActiveTextColor="#FFF"
                    renderTabBar={() => <ScrollableTabBar style={{backgroundColor:AppStyle.mainColor}}/>}>
                    <TaskList {...this.props} type="all" tabLabel="全部"/>
                    <TaskList {...this.props} type="end" tabLabel="已完成"/>
                    <TaskList {...this.props} type="init" tabLabel="未完成"/>
                </ScrollableTabView>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: AppStyle.grayColor,
    },
    subtitleView:{
        paddingLeft:10,
    },
    itemStyle:{
        borderBottomColor: "#f4f4f4",
        borderBottomWidth: 1
    }
})

const mmapState=state=>{
    return {taskList:state.TaskReducer.taskList}
}

export default connect(mmapState,ReduxAction)(TaskListPage);